<template>
<div class="cmt-container">
    <h3>发表评论</h3>
    <hr>
    <textarea placeholder="请输入要BB的内容（做多吐槽120字）" maxlength="120" v-model="message"></textarea>

    <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>

    <div class="cmt-list">
      <div class="cmt-item" v-for="(item, i) in comments" :key="item.add_time">
        <div class="cmt-title">
          第{{ i+1 }}楼&nbsp;&nbsp;用户：{{ item.user_name }}&nbsp;&nbsp;发表时间：{{ item.add_time | dataFormat }}
        </div>
        <div class="cmt-body">
          {{ item.content === 'undefined' ? '此用户很懒，嘛都没说': item.content }}
        </div>
      </div>

    </div>

    <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
  </div>

</template>

<script>
	
import { Toast } from "mint-ui";
export default {
  data(){
    return {
      pageIndex: 1, // 默认展示第一页数据
      comments: [],// 所有的评论数据
	  message:""
    };
  },
  created() {
    this.getComments();
  },
  methods: {
    getComments() {
      // 获取评论
      this.$http
        .get("api/getcomments/" + this.id + "?pageindex=" + this.pageIndex)
        .then(result => {
          if (result.body.status === 0) {
            // this.comments = result.body.message;
            // 每当获取新评论数据的时候，不要把老数据清空覆盖，而是应该以老数据，拼接上新数据
            this.comments = this.comments.concat(result.body.message);
          } else {
            Toast("获取评论失败！");
          }
        });
    },
	getMore(){
		this.pageIndex ++
	},
	postComment(){
		if(this.message.trim().length ===0 ){
			return Toast("输入不能为空")
		}
		this.$http
			.post("api/postcomment/"+this.$route.params.id,{content:this.message.trim()})
			.then(function(result){
				if(result.body.status === 0){
					//拼接一个新对象
					var cmt = {
						user_name:'匿名用户',
						add_time:Date.now(),
						content:this.message.trim()
					};
					this.comments.unshift(cmt);
					this.message = "";
				}
			})
	}
	

  },
  props: ["id"]
};
</script>

<style lang="scss" scoped>
	.cmt-container{
		h3{
			font-size: 18px;
		}
		textarea{
			font-size: 16px;
			margin: 0;
		}
		.cmt-list{
			.cmt-item{
				font-size: 14px;
				.cmt-title{
					line-height: 30px ;
					background-color: #ccc;
				}
				.cmt-body{
					line-height: 35px;
					text-indent: 2em;
					
				}
			}
			
			
		}
	}
	.mui-bar-tab .mui-tab-item-lib{
	    display: table-cell;
	    overflow: hidden;
	    width: 1%;
	    height: 50px;
	    text-align: center;
	    vertical-align: middle;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    color: #929292;
	}
	.mui-bar-tab .mui-tab-item-lib .mui-icon {
	    top: 3px;
	    width: 24px;
	    height: 24px;
	    padding-top: 0;
	    padding-bottom: 0;
	}
	.mui-bar-tab .mui-tab-item-lib .mui-icon ~ .mui-tab-label {
	    font-size: 11px;
	    display: block;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}
	
	
	
</style>
